<template>
    <div>
        <div class="addItem">
            <h3 class="title">{{title}}</h3>
            <div>
                <el-form ref="form" :model="shopLogTem" label-width="80px">
                    <el-form-item label="模板名称:">
                        <el-input style="width: 600px" placeholder="请输入模板名称" v-model="shopLogTem.name"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-table
                                :data="shopLogRuleVos"
                                style="width: 100%"
                                border
                        >
                            <el-table-column
                                    prop="province"
                                    label="目的地区"
                                    width="250">
                                <template slot-scope="scope">
                                    <div v-if=" scope.row.status == 1" style="text-align: center">{{scope.row.province}}</div>
                                    <div style="text-align: center;font-size: 12px;color: gray;opacity: 0.5" v-if=" scope.row.status == 1">为设置区域生效此规则</div>
                                    <div v-if="scope.row.status != 1 ">
                                        <el-select
                                                v-model="shopLogRuleVos[scope.$index].provinces"
                                                multiple
                                                style="width: 100%"
                                                @change="(item)=>selectChange(item,scope.$index)"
                                                placeholder="请选择">
                                            <el-option
                                                    v-for="item in addressList"
                                                    :key="item.value"
                                                    :label="item.text"
                                                    :disabled="item.disable"
                                                    :value="item.text"
                                                    >
                                            </el-option>
                                        </el-select>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="fw"
                                    label="首运重量(kg)"
                                    width="195">
                                <template slot-scope="scope">
                                    <el-input-number  :min="0" v-model="scope.row.fw"></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="fp"
                                    label="首重价格(元)"
                                    width="195">
                                <template slot-scope="scope">
                                    <el-input-number :min="0"  v-model="scope.row.fp"></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="up"
                                    label="续重价格(元)"
                                    width="195">
                                <template slot-scope="scope">
                                    <el-input-number :min="0" v-model="scope.row.up"></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="fw"
                                    label="是否默认规则" >
                                <template  slot-scope="scope">
                                    <el-radio disabled v-for="(item,index) in statusRadios" :value="scope.row.status" :key="index" :label="item.index">{{item.name}}</el-radio>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop=""
                                    label="操作">
                                <template slot-scope="scope">
                                    <div style="text-align: center">
                                        <el-button type="danger" icon="el-icon-delete" v-if="scope.row.status != 1" @click="del(scope.$index)" circle></el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="add">
                            <el-button @click="addRule" type="info" plain><i class="el-icon-plus">添加规则</i></el-button>
                        </div>
                        <div class="save">
                            <el-button v-if="!shopLogTemId"  type="primary" @click="createData">保存</el-button>
                            <el-button v-else  type="primary" @click="updateData">保存</el-button>
                            <el-button type="info" @click="cancel" plain>取消</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import {provinceList} from "../../../utils/area";
    import {save,info,update,getLogRuleList} from '@/api/shopLogTem'
    export default {
        data() {
            return {
                title:null,
                shopLogTemId:null,
                provinces:[],
                list:[],
                temps:
                    {
                        id: null, province: null, weight: null, price: null, fp: null, up: null
                    },
                statusRadios:[
                    {
                        index:0,
                        name:'否'
                    },
                    {
                        index:1,
                        name:'是'
                    },
                ],
                shopLogTem:{
                    id:null,
                    shopId:null,
                    name:null,
                    status:null
                },
                shopLogStatus:null,
                shopLogRuleVos: [],
                addressArray:[],
            }
        },
        computed:{
            addressList() {
                let flag = true;
                provinceList.forEach(ad=>{
                    ad.disable = false
                    this.shopLogRuleVos.forEach(item=>{
                        //非当前选中列
                        item.provinces.forEach(p=>{
                            if(p==ad.text){
                                ad.disable = true
                            }
                        })
                    })
                    if (flag){
                        this.addressArray.forEach(itemArray =>{
                            itemArray.provinces.forEach(pv => {
                                if(ad.text==pv){
                                    ad.disable = true
                                }
                            })
                        })
                        flag = false
                    }

                })
                //去除
                return   provinceList
            },
        },
        mounted() {
            if (!this.$route.query.shopLogTemId){
                this.shopLogRuleVos.push(
                    {province: '默认区域',
                        provinces: [],
                        logId:null,
                        fw:null,
                        fp:0,
                        up:0,
                        status:1}
                )
                this.title = "新增运费模板"
            }else {
                this.getList();
                this.shopLogTemId = this.$route.query.shopLogTemId
                this.title = "编辑运费模板"
                this.info()
            }
            if (this.$route.query.shopLogStatus != null){
                this.shopLogStatus = this.$route.query.shopLogStatus;
            }
        },
        methods: {
            addRule(){
                this.shopLogRuleVos.push(
                    {
                        id:null,
                        province: null,
                        provinces: [],
                        logId:null,
                        fw:null,
                        fp:0,
                        up:0,
                        status:0
                },)
                this.provinces=[]

            },
            getList() {
                getLogRuleList().then(response => {
                    if(response.data.length > 1){
                        this.addressArray = response.data
                    }
                })
            },
            del(index){
                this.shopLogRuleVos.some((item,i) => {
                    if (i == index){
                        this.shopLogRuleVos.splice(index,1);
                        return true;
                    }
                })
            },
            cancel(){
                this.$router.go(-1);//返回上一层
            },
            // selectStatus(index){
            //     if (this.shopLogRuleVos[index].status == 0){
            //         this.shopLogRuleVos.forEach((item) => {
            //             if (item.status == 1 && item.province.indexOf("默认区域") > -1){
            //
            //             }
            //             item.status = 0
            //         })
            //     /*    if (index != 0){
            //             this.shopLogRuleVos[index].province = null
            //             this.shopLogRuleVos[index].provinces = []
            //         }*/
            //         this.shopLogRuleVos[index].status=1
            //     }else {
            //         this.shopLogRuleVos[index].status=0
            //     }
            // },
            selectChange(item,index){
                let str = '';
                if (this.shopLogRuleVos[index].provinces.length == 0){
                    this.shopLogRuleVos[index].province = ''
                    return;
                }
                this.shopLogRuleVos[index].provinces.forEach((item) =>{
                    str += item +"_"
                })
                if (str != ''){
                    this.shopLogRuleVos[index].province = str.substr(0,str.length - 1)
                }
            },
            info(){
                info(this.shopLogTemId).then(res => {
                    this.shopLogTem = res.data.shopLogTem;
                    this.shopLogRuleVos = res.data.shopLogRules;
                })
            },
            updateData(){
                let flag = false;
                let provinceFlag = false;
                let fwFlag = false;
                if (this.shopLogTem.name == null || this.shopLogTem.name == ""){
                    this.$message.error("模板名称不能为空")
                    return;
                }
                this.shopLogRuleVos.forEach((item) => {
                    if (item.status == 1 ){
                        flag = true;
                    }
                    if (item.fw == null || item.fw == ""){
                        fwFlag = true;
                    }
                    if (item.province == null || item.province == ""){
                        provinceFlag = true;
                    }
                })
                if (provinceFlag){
                    this.$message.error("请选择正确的目的地区");
                    return;
                }
                if (fwFlag){
                    this.$message.error("首运重量不能为空");
                    return;
                }

                if (!flag){
                    this.$message.error("必须有一个默认规则")
                    return;
                }
                update(this.shopLogTem,this.shopLogRuleVos,this.shopLogStatus).then(res => {
                    this.cancel();
                    this.$notify({
                        title: '成功',
                        message: '创建成功',
                        type: 'success',
                        duration: 2000
                    })
                })
            },
            createData(){
                console.log(this.shopLogRuleVos)
                let flag = false;
                let provinceFlag = false;
                let fwFlag = false;
                if (this.shopLogTem.name == null || this.shopLogTem.name == ""){
                    this.$message.error("模板名称不能为空")
                    return;
                }
                this.shopLogRuleVos.forEach((item) => {
                    if (item.status == 1 ){
                        flag = true;
                    }
                    if (item.fw == null || item.fw == ""){
                        fwFlag = true;
                    }
                    if (item.province == null || item.province == ""){
                        provinceFlag = true;
                    }
                })
                if (provinceFlag){
                    this.$message.error("请选择正确的目的地区");
                    return;
                }
                if (fwFlag){
                    this.$message.error("首运重量不能为空");
                    return;
                }

                if (!flag){
                    this.$message.error("必须有一个默认规则")
                    return;
                }
                save(this.shopLogTem,this.shopLogRuleVos,this.shopLogStatus).then(res => {
                    this.cancel();
                    this.$notify({
                        title: '成功',
                        message: '创建成功',
                        type: 'success',
                        duration: 2000
                    })
                })
            }

        }
    }
</script>

<style scoped>
    .addItem{
        margin-left: 30px;
        color: gray;
    }
    .title{
        border-left: 4px solid gray;
    }
    .add{
        margin-top: 20px;
        margin-bottom: 20px;
    }

</style>
